<template>
	<view class="">
		<van-goods-action>
			<van-goods-action-icon icon="wap-home-o" text="首页" dot @click="goHOMe" />
			<van-goods-action-icon icon="cart-o" text="购物车" :info="goodscount"  @click="btnShopping"/>
			<van-goods-action-icon icon="star-o" text="收藏" />
			<van-goods-action-button text="加入购物车" @click="shopping" type="warning" />
			<van-goods-action-button text="立即购买"   @click="buttonClick" />
		</van-goods-action>
	
	</view>
</template>

<script>

export default {
	
	data() {
		return {};
	},
	props:['goodscount'],
	methods: {
		//立即购物
		buttonClick() {
			this.$emit('buttonClick');
			uni.navigateTo({
				url:'/pages/order/createOrder'
			})
			
		},
		//点击添加
		shopping(){
			this.$emit('shopping')
		},
		goHOMe(){
			uni.switchTab({
				url:'../../pages/index/index'
			})
		},
		//跳转购物车
		btnShopping(){
			uni.switchTab({
				url:'../../pages/shopping/shopping'
			})
		}
	}
};
</script>

<style lang="scss" scoped>
/* #ifndef H5 APP-PLUS */
.navigation {
	display: flex;
	margin-top: 100rpx;
	border: solid 2rpx #f2f2f2;
	background-color: #ffffff;
	padding: 15rpx 0;
	.left {
		display: flex;
		font-size: 20rpx;
		.item {
			margin: 0 25rpx;
			&.car {
				text-align: center;

				position: relative;

				.car-num {
					position: absolute;
					top: -10rpx;
					right: -10rpx;
				}
			}
			.server-fill {
			}
			.text {
				margin-left: 5rpx;
			}
		}
	}
	.right {
		display: flex;
		font-size: 28rpx;
		align-items: center;
		.btn {
			width: 140rpx;
			line-height: 66rpx;
			text-align: center;
			padding: 0 30rpx;
			border-radius: 36rpx;
			color: #ffffff;
		}
		.cart {
			background-color: #ed3f14;
		}
		.buy {
			background-color: #ff7900;
		}
	}
}
/* #endif */
</style>
